<style lang="scss" scoped>
  .header{
    .btnBox{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        text-align: center;
        .music{
          flex: 1;
          img{
            width: 34px !important;
          }
        }
        .passTitle{
          flex: 1;
          img{
            width: 70px !important;
          }
        }
        .tip{
          flex: 1;
          img{
            width: 69px !important;
          }
        }
        span{
            margin: 0 0.5rem;
            position: relative;
            padding: 0.5rem 1rem;
            background-color: #ff00ff;
            border-radius: 0.4rem;
            color: white;
            i{
                position: absolute;
                right: -0.8rem;
                top: -0.8rem;
                width:1.6rem;
                height:1.6rem;
                line-height:1.6rem;
                border-radius: 0.8rem;
                background-color: red;
                color: white;
                text-align: center;
            }
        }
    }
    .text{
      text-align: center;
      font-size: 15px;
    }
    .popTipBox{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: rgba($color: #000000, $alpha: 0.8);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3000;
      .content{
        width: 90%;
        height: 150px;
        background-image:url("../../../assets/img/tipModel.png");
        background-size:100% 100%;
        .tips{
          margin-top: 9rem;
          color: white;
          text-align: center;
        }
      }
      img{
        width:100%;
      }
      .close-icon{
        position: fixed;
        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        top: 0.7rem;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3002;
      }
    }
  }
  .bounce-enter-active {
    animation: bounce-in .5s;
  }
  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    80% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
      
<template>
  <div class="header">
    <div class="btnBox">
        <div class="music">
          <img src="../../../assets/img/music.png" alt="">
        </div>
        <div class="passTitle">
          <img v-if="ji==1" src="../../../assets/img/g1.png" alt="">
          <img v-if="ji==2" src="../../../assets/img/g2.png" alt="">
          <img v-if="ji==3" src="../../../assets/img/g3.png" alt="">
        </div>
        <div class="tip" @click="tipBtn">
          <img src="../../../assets/img/tip.png" alt="">
        </div>
    </div>
    <div class="text">{{text}}</div>
    <transition name="bounce">
      <div class="popTipBox" v-if="showTipPop">
        <div class="content">
          <div class="tips margT-m fs-16">恭喜你已经过关！</div>
        </div>
        
        <span class="close-icon" :style="{backgroundColor:'red'}" @click="showTipPop = false"><van-icon color="white" name="cross" /></span>
      </div>
    </transition>
  </div>
</template>

<script>
import { Icon } from 'vant';
export default {
  components: {
    [Icon.name]: Icon
  },
  props: ['ji','text'],
  props:{
    ji:Number,
    text:String
  },
  data() {
    return {
      showTipPop:false
    }
  },
  methods: {
    tipBtn() {
      this.showTipPop = true
    }
  }
}
</script>
